<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  labelFlex="80px"
  (onSearch)="queryResetData($event)"
  (onReset)="queryResetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-2">
  <div style="background: #ECECEC; padding: 10px;">
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="12">
        <nz-card nzSize="small">
          <nz-statistic
            [nzValue]="(statisticsObjs?.totalAmount | number: '1.2-2')!"
            [nzTitle]="'总流水'"
            [nzPrefix]="prefixTplOne"
            [nzValueStyle]="{ color: '#3F8600' }"
          ></nz-statistic>
          <ng-template #prefixTplOne>
            <i nz-icon nzType="account-book" nzTheme="outline"></i>
          </ng-template>
        </nz-card>
      </nz-col>

      <nz-col [nzSpan]="12">
        <nz-card nzSize="small">
          <nz-statistic
            [nzValue]="(statisticsObjs?.totalIncome | number: '1.2-2')!"
            [nzTitle]="'总收益'"
            [nzPrefix]="prefixTplTwo"
            [nzValueStyle]="{ color: '#409EFF' }"
          ></nz-statistic>
          <ng-template #prefixTplTwo>
            <i nz-icon nzType="dollar-circle" nzTheme="outline"></i>
          </ng-template>
        </nz-card>
      </nz-col>
    </nz-row>
  </div>
</nz-card>

<nz-card class="m-t-2">
  <div class="opera-wrap p-b-10">
    <button
      nz-button
      nzType="primary"
      (click)="showExamineModal()"
    >新增流水</button>
  </div>

  <div class="pagination-wrap-position table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center">商户ID</th>
          <th nzAlign="center">商户名称</th>
          <th nzAlign="center">所属拓展员（ID）</th>
          <th nzAlign="center">总流水</th>
          <th nzAlign="center">总收益</th>
          <th nzAlign="center">查看明细</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 商户ID -->
          <td nzAlign="center">{{ data.mchId }}</td>
          <!-- 商户名称 -->
          <td nzAlign="center">{{ data.mchName || '-' }}</td>
          <!-- 所属拓展员（ID） -->
          <td nzAlign="center">{{ data.userName }}（{{ data.userId }}）</td>
          <!-- 总流水 -->
          <td nzAlign="center">{{ data.amount || '0' }}</td>
          <!-- 总收益 -->
          <td nzAlign="center">{{ data.income || '0' }}</td>
          <!-- 查看明细 -->
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showDetailedModal(data)"
            >查看</a>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 新增流水 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isFlowWaterVisible"
  [nzTitle]="'流水'"
  (nzOnCancel)="isFlowWaterVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>拓展员</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择拓展员!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择拓展员"
              formControlName="userId"
              (ngModelChange)="adminChange($event)">
              <nz-option
                *ngFor="let option of adminOptions"
                [nzLabel]="option.userName"
                [nzValue]="option.id"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>商户名称</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择商户名称!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择商户名称"
              formControlName="mchId"
              [nzDisabled]="!validateForm.value.userId">
              <nz-option
                *ngFor="let option of merchantOptions"
                [nzLabel]="option.mchName"
                [nzValue]="option.id"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>日期</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择商户名称!">
            <nz-date-picker
              style="width: 50%;"
              [nzAllowClear]="false"
              formControlName="date"
              (ngModelChange)="timeChange($event)"
            ></nz-date-picker>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>流水</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请输入流水!">
            <nz-input-number
              style="width: 50%;"
              [nzMin]="0"
              [nzStep]="1"
              [nzPrecision]="2"
              nzPlaceHolder="请输入流水"
              formControlName="amount"
              (ngModelChange)="waterChange($event)"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>收益</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请输入收益!">
            <nz-input-number
              style="width: 50%;"
              [nzMin]="0"
              [nzStep]="1"
              [nzPrecision]="2"
              nzPlaceHolder="请输入收益"
              formControlName="income"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isFlowWaterVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="subWaterLoading" (click)="submitForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 新增流水 Modal -->

<!-- S 查看明细 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="620"
  [(nzVisible)]="isDetailedVisible"
  [nzTitle]="detailedItem?.mchName + '明细'"
  (nzOnCancel)="isDetailedVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="pagination-wrap-position table-wrap">
        <nz-table
          #mdTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzHideOnSinglePage
          nzBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="detailedTableParams.loading"
          [nzData]="detailedTableParams.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="detailedTableParams.total"
          [nzPageIndex]="detailedTableParams.page"
          [nzPageSize]="detailedTableParams.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onModalPageIndexChanget($event)"
          (nzPageSizeChange)="onModalPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center">日期</th>
              <th nzAlign="center">流水</th>
              <th nzAlign="center">收益</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of mdTable.data; let index = index;">
              <!-- 日期 -->
              <td nzAlign="center">{{ data.date || '-' }}</td>
              <!-- 流水 -->
              <td nzAlign="center">{{ data.amount || '0' }}</td>
              <!-- 收益 -->
              <td nzAlign="center">{{ data.income || '0' }}</td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- S 查看明细 -->